<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					电子围栏
				</view>
				<text class="cuIcon-add font-sub-title uni-bold" @tap="jump('/pages/elecfence/add')"></text>
			</view>
		</view>
		<map :style="{marginTop:navHeight}" style="height: 600rpx;" :latitude="latitude"  :longitude="longitude" :circles="circles" :markers="markers">
		</map>
		<scroll-view  :style="{height:getHeight}" style="margin-top: -15rpx;" scroll-y="true">
			<view class="cu-list menu sm-border" v-if="varList.length!=0">
				<view class="cu-item" v-for="data in varList" @tap="goEdit(data)">
					<view class="content">
						<text class="font-small ellipsis">{{data.ADDRESS}}</text>
					</view>
					<text class="font-small-b" style="margin-right: 20rpx;width: 125rpx;text-align: right;">半径{{data.RADIUS*1000}}米</text>
					<view class="action">
						<view class=" line-hight-1 font-small-b" :class="data.STATUS==1?'text-green':'text-red'">{{data.STATUS==1?'监测中':'已暂停'}}</view>
					</view>
				</view>
			</view>
			<view v-else class="no_data">
				<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var that;
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed:{
			...mapGetters(['navHeight']),
			getHeight(){
				var windowHeight = uni.getSystemInfoSync().windowHeight
				return windowHeight -  uni.getSystemInfoSync().statusBarHeight-55 - uni.upx2px(600) +'px'
			}
		},
		data() {
			return {
				statusBarHeight:Vue.prototype.StatusBar,
				latitude: '',
				longitude: '',
				user:'',
				circles:[{
					latitude: '',
					longitude: '',
					fillColor:'#00000022',
					color:'#00000022',
					radius:'0'
				}],
				markers: [{
					title:'',
					latitude:'',
					longitude:'',
					iconPath: '../../static/img/point.png'
				}],
				varList:[]
			}
		},
		onLoad() {
			// plus.geolocation.getCurrentPosition(function(res){
			// 		that.latitude = res.coords.latitude
			// 		that.longitude = res.coords.longitude
			// 		that.markers[1].latitude = that.latitude
			// 		that.markers[1].longitude = that.longitude
			// 		that.address = res.addresses
			// 	},function(e){
			// 		uni.showToast({
			// 			"title":e.message,
			// 			"position":"bottom",
			// 			"icon":"none"
			// 		})
			// 	}
			// )
		},
		onShow() {
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.$http.getElecfenceList().then((res)=>{
				if(res.code==1){
					that.varList = res.result
					that.latitude= res.result[0].LAT
					that.longitude = res.result[0].LNG
					that.circles[0].latitude= res.result[0].LAT
					that.circles[0].longitude = res.result[0].LNG
					that.circles[0].radius = res.result[0].RADIUS*1000
					that.markers[0].latitude= res.result[0].LAT
					that.markers[0].longitude = res.result[0].LNG
				}else{
					uni.showToast({
						"title":res.message,
						"position":"bottom",
						"icon":"none"
					})
				}
			})
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			jump(path) {
				uni.navigateTo({
					url: path
				})
			},
			goEdit(data){
				uni.navigateTo({
					url: '/pages/elecfence/add?data='+JSON.stringify(data)
				})
			}
		}
	}
</script>

<style>
	map {
        width: 100%;
        height: 500upx;
    }
	.cu-item{
		height: 108rpx;
	}

	.ellipsis{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-height: 1.2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.no_data,.no_data_img{
		margin-top: 100rpx;
	}
	.fixd-map{
		position: fixed;
		width: 100%;
	}
</style>
